<template>
  <div class="show-lon-lat">
    <div class="lon-lat">LV_{{ mapZoomIndex }}</div>
    <div class="show-item">
      {{ transfLonAndLat(coordinate[0], 'lon', true) }}
    </div>
    <div class="show-item">
      {{ transfLonAndLat(coordinate[1], 'lat', true) }}
    </div>
  </div>
</template>

<script>
  import { transfLonAndLat } from '/@/utils/chart';
  export default {
    props: {
      mapZoomIndex: {
        default: 0,
      },
      coordinate: {
        default: [0, 0],
      },
    },
    data() {
      return {
        transfLonAndLat,
      };
    },
  };
</script>

<style scoped lang="less">
  .show-lon-lat {
    position: absolute;
    bottom: 20px;
    left: calc(50% - 100px);
    margin-top: 10px;
    display: flex;
    z-index: 100;
    background-color: #ffffffb3;
    padding: 3px 5px;
    border-radius: 3px;
    .show-item {
      text-align: right;
      font-size: 12px;
      color: #333;
      width: 70px;
      margin: 0 5px;
    }
    .lon-lat {
      text-align: right;
      font-size: 12px;
      color: #333;
      margin-right: 5px;
    }
  }
</style>
